<template>
	<view>
		<index @ShowNews="ShowNews" v-if="PageCur=='index'"></index>
		<search v-if="PageCur=='search'"></search>
		<me v-if="PageCur=='me'"></me>
		
		<life v-if="PageCur=='life'" :pageNum="pageNum" :scrollTop="scrollTop"></life>
		<other v-if="PageCur=='other'"></other>

		<view class="box">
			<view class="cu-bar tabbar bg-white shadow foot">
				<view class="action" @click="NavChange" data-cur="index">
					<view class='cuIcon-cu-image tn-tabbar--content--item--icon--clip'>
						<view v-if="PageCur=='index'"
						class="tn-icon-home-fill title-text" 
						style="width: 50rpx; height: 50rpx; margin: auto;">
						</view>
						
						<view v-if="PageCur != 'index'"
						class="tn-icon-home" 
						style="width: 50rpx; height: 50rpx; margin: auto;">
						</view>
						
						<!-- <image v-if="PageCur=='index'" src="../../static/tabBar/index_cur.png"></image> -->
						<!-- <image v-if="PageCur != 'index'" src="../../static/tabBar/index.png"></image> -->
					</view>
					
					<view :class="PageCur=='index'?'color_main':'text-gray'" >
					查猫
					</view>
				</view>

<!-- 				<view class="action" @click="NavChange" data-cur="search">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur=='search'" src="../../static/tabBar/order_cur.png"></image>
						<image v-if="PageCur != 'search'" src="../../static/tabBar/order.png"></image>
					</view>
					<view :class="PageCur=='search'?'color_main':'text-gray'">百科</view>
				</view> -->
				
				<view @click="NavChange" class="action text-gray add-action" data-cur="life">
					<image class="logo_btn" mode="widthFix" 
					src="../../static/img/avatar.png">
					</image>
					<view :class="PageCur=='life'?'color_main':'text-gray'">日常记录</view>
				</view>
				
<!-- 				<view class="action" @click="NavChange" data-cur="other">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur=='other'" src="../../static/tabBar/shop_cur.png"></image>
						<image v-if="PageCur != 'other'" src="../../static/tabBar/shop.png"></image>
					</view>
					<view :class="PageCur=='other'?'color_main':'text-gray'">其他</view>
				</view> -->


				<view class="action" @click="NavChange" data-cur="me">
					<view class='cuIcon-cu-image'>
						<!-- 红点 -->
						<!-- <view class="cu-tag badge"></view> -->
<!-- 						<image v-if="PageCur=='me'" src="../../static/tabBar/me_cur.png"></image>
						<image v-if="PageCur != 'me'" src="../../static/tabBar/me.png"></image> -->
						<view v-if="PageCur=='me'"
						class="tn-icon-my-fill title-text" 
						style="width: 50rpx; height: 50rpx; margin: auto;">
						</view>
						
						<view v-if="PageCur != 'me'"
						class="tn-icon-my" 
						style="width: 50rpx; height: 50rpx; margin: auto;">
						</view>
						
						
					</view>
					<view :class="PageCur=='me'?'color_main':'text-gray'">关于</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import index from "./inedx.vue";	//首页查貓
	import search from "./search.vue";	//猫咪百科
	import me from "./me.vue";	        //个人中心
	import life from "./life.vue";       //生活分享
	import other from "./other.vue";    // 其他
	export default {
		components: {
			index,
			search,
			me,
			life,
			other
		},
		data() {
			return {
				PageCur: 'index',
				message: '2',
				openId:'',
				access_token:'',
				tip:"我是提示",
				duration:1,
				pageNum: 0,    // 页数
				scrollTop: 0, // 下拉距离

			};
		},
		
		// 下拉刷新
		onReachTop() {
			this.scrollTop = 0; // 监听滚动到顶部事件，重置滚动高度为0
		},
		onPageScroll(event) {
			if(this.PageCur == 'life'){
				// console.log('执行刷新:',this.scrollTop)
				this.scrollTop = event.scrollTop; // 监听页面滚动事件，实时更新滚动高度			
			}	
		},
		
		onReachBottom() {
			if(this.PageCur == 'life'){
				this.pageNum = this.pageNum+1
				// console.log('执行刷新:',this.pageNum)
				
			}
			
		},

		onLoad() {

		},
		methods: {
			

			
			
			ShowNews(e){
				this.PageCur = e;
				console.log(e)
				
			},
			NavChange: function(e) {
				console.log(e.currentTarget.dataset.cur)

				this.PageCur = e.currentTarget.dataset.cur;

				if (this.PageCur == 'index') {
					// console.log('个人中心')
				} 
				else if (this.PageCur == 'me') {
					// document.title = '个人中心'
				}
				else if (this.PageCur == 'search') {
					// document.title = '个人中心'
				}
				else if (this.PageCur == 'life') {
					
					// document.title = '个人中心'
				}
				else if (this.PageCur == 'other') {
					// document.title = '个人中心'
				}

				// uni.setStorage({
				// 	key: 'PageCur',
				// 	data: this.PageCur,
				// 	success: function() {
				// 		console.log('保存成功！');
				// 	}
				// });
			},
			NavChange_xd: function() {
				uni.navigateTo({
					url: 'publish',
					animationType: 'slide-in-bottom',
					animationDuration: 200
				});
			}
		}
	}
</script>

<style lang="scss">
	.color_main{
		color: #000000;
		font-weight: 900;
	}
	.box {
		margin: 20upx 0;
	}
	.box view.cu-bar {
		margin-top: 20upx;
	}
	
	.logo_btn{
		width: 38*2rpx;
		height: 38*2rpx;
		position: absolute;
		z-index: 2;
		border-radius: 50%;
		top: -40rpx;
		left: 0rpx;
		right: 0;
		margin: auto;
		padding: 0;
	}
	.cu-bar.tabbar .action.add-action {
	    padding-top: 56rpx !important;
	}
	
	

</style>
